<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>壁纸一览</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="container">
        <h1>壁纸一览</h1>
        <form>
            <div class="input-group mb-3">
                <input id="filters-title" type="text" class="form-control" placeholder="输入您想查询的标题"
                    aria-label="输入您想查询的标题" aria-describedby="button-search" />
                <button class="btn btn-outline-primary" type="button" id="button-search" onclick="getSearchList()">
                    查询
                </button>
            </div>
        </form>
        <ul class="pager">
            <li id="li-pager-info"></li>
            <li id="li-previous"><a href="javascript:gotoPrevious()">前一页</a></li>
            <li id="li-next"><a href="javascript:gotoNext()">后一页</a></li>
        </ul>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">图片</th>
                    <th scope="col">标题</th>
                    <th scope="col">版权</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

    <script>
        var nowPage = 1
        var totalPage = 1
        var totalRows = 0

        function getSearchList() {
            // 搜索时把当前页重置成第一页
            nowPage = 1
            getList()
        }

        function getList() {
            let params = {
                page: nowPage,
                size: 5,
                title: $('#filters-title').val()
            }
            $.ajax({
                type: 'GET',
                url: '/wallpapers',
                data: Object.assign(params),
                success: function (result) {
                    if (result.status === 200) {
                        totalPage = result.total
                        totalRows = result.records
                        if (nowPage >= totalPage) {
                            $('#li-next').hide()
                        } else {
                            $('#li-next').show()
                        }
                        if (nowPage <= 1) {
                            $('#li-previous').hide()
                        } else {
                            $('#li-previous').show()
                        }
                        $('#li-pager-info').text(`共 ${totalPage} 页 ${totalRows} 条数据`)
                        let table = $('.table')
                        $('.table tr').empty()
                        for (let index = 0; index < result.rows.length; index++) {
                            const item = result.rows[index]
                            let tr = $(`<tr>
                            <td>${item.id}</td>
                            <td><img src="${'https://cn.bing.com' + item.url}" class="rounded img-thumbnail" alt="${
                  item.title
                }"></td>
                            <td>${item.title}</td>
                            <td>${item.copyright}</td>
                            </tr>`)
                            table.append(tr)
                        }
                    }
                },
                complete: function (XMLHttpRequest, textStatus) {},
                error: function () {}
            })
        }

        function gotoPrevious() {
            nowPage = nowPage - 1
            if (nowPage < 1) {
                nowPage = 1
            }
            getList()
        }

        function gotoNext() {
            nowPage = nowPage + 1
            if (nowPage > totalPage) {
                nowPage = totalPage
            }
            getList()
        }

        $(document).ready(function () {
            getList()
        })
    </script>
</body>
<style>
    td img {
        width: 200px;
    }

    ul li {
        display: inline-block;
    }
</style>

</html>